<template>
    <div>
      <div class="gap_input" @click="keyClick">
        <el-input v-model="currValue" placeholder="请输入用户信息"/>
      </div>
      <Keyboard :isShows="keyShow" v-on:updatekey="GetKeyVal"></Keyboard>
    </div>
</template>
<script>
import Keyboard from '@/views/keyboard'
export default {
  props: {
    inputValue: {
      type: String,
      default: ''
    }
  },
  components: {
    Keyboard
  },
  data () {
    return {
      keyShow: false,
      currValue: ''
    }
  },
  watch: {
    inputValue (val) {
      this.currValue = val
    }
  },
  methods: {
    keyClick () {
      this.keyShow = !this.keyShow
    },
    GetKeyVal (val) {
      if (val) {
         this.currValue = val.replace('undefined', '')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.gap_input{
  width: 30% !important;
  .el-input{
    width: 100%;
    pointer-events: none;
  }
 .el-input__inner{
    border: 2px solid #333;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    color: #333;
    border-radius: 0;
    font-size: 26px;
  }
}
</style>